<template>
    <div>
        <div class="zg_rmzb">
            <div class="zg_zbbt">
                <p><a href="/list/?kj_zhibo=1">更多</a></p>
                <h3><a href="javascript:;">热门直播</a></h3>
            </div>
            <div class="zg_zbbox">
                <div class="zg_zbbl" id="zg_zbbl">
                    <div class="zg_zbzt" style="display: none;"><a href="/class-156618/" target="_blank">&nbsp;</a><img
                            src="uploads_it/2008/QuanGuo/F8C2050112761PTT.jpg?x-oss-process=image/resize,w_620"><span
                            class="zg_zbzt_sp zg_zbzt_wks"><font>未开始</font></span>
                        <p>电商玩法解析与答疑6</p></div>

                    <div v-for="item in clssMassage" class="zg_zbzt" :style=item.display>
                        <a href="/class-156618/" target="_blank">&nbsp;</a>
                        <img :src=item.img><span
                            class="zg_zbzt_sp zg_zbzt_wks"><font>{{item.state}}</font></span>
                        <p>{{item.title}}</p></div>
                </div>
                <div class="zg_zbbr">
                    <div class="scroll-pane" style="overflow: hidden; padding: 0px; width: 580px;">
                        <div class="jspContainer" style="width: 580px; height: 350px;">
                            <div class="jspPane" style="padding: 0px; top: 0px; width: 580px;">
                                <ul id="scroll-pane ">

                                    <li v-for="item1 in clssMassage" :class=item1.zg_on @mouseover="on(item1)">
                                        <div class="zg_zbrzt zg_zbr_wks"><span>{{item1.date}}</span></div>
                                        <h6><a href="/class-131138/" target="_blank">{{item1.title}}</a></h6>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "HomeClass",
        methods: {
            on(event) {
                for (var i in this.clssMassage) {
                    this.clssMassage[i].zg_on = ''
                    this.clssMassage[i].display = ''
                }

                event.zg_on = 'on'
                event.display = 'display: block;'
                console.log(event)
            }
        },
        data() {
            return {
                clssMassage: [{
                    title: "电商玩法解析与答疑6",
                    img: "uploads_it/2008/QuanGuo/F8C2050112761PTT.jpg",
                    state: "未开始",
                    date: "2020-08-25 19:00:00"
                    , zg_on: 'on'
                    , display: 'display: block;'
                }, {
                    title: "NumPy科学计算库",
                    img: "uploads_it/2005/QuanGuo/F5T91763899RHRQR.jpg",
                    state: "未开始",
                    date: "2020-08-25 19:00:00", zg_on: '', display: ''
                }, {
                    title: "社群运营的秘密武器",
                    img: "uploads_it/2006/QuanGuo/F682091147347RZY.jpg",
                    state: "未开始",
                    date: "2020-08-25 19:00:00", zg_on: '', display: ''
                }, {
                    title: "直播课四：项目10大知识领域专题三",
                    img: "uploads_it/2007/QuanGuo/F799486143329XHO.jpg",
                    state: "未开始",
                    date: "2020-08-25 19:30:00", zg_on: '', display: ''
                }, {
                    title: "直播课四：项目10大知识领域专题三",
                    img: "uploads_it/2007/QuanGuo/F799486143329XHO.jpg",
                    state: "未开始",
                    date: "2020-08-25 19:30:00", zg_on: '', display: ''
                },]
            }
        }
    }
</script>

<style >
    /*@import "../../../public/css/public.css?v=6";*/
    /*@import "../../../public/it/css/layout.css";*/
    /*@import "../../../public/it/css/skin.css";*/
    /*@import "../../../public/it/css/global.css";*/
    /*@import "../../../public/it/css/index.css?v=11";*/

    .zg_on:hover {
        color: blue;
    }

    .jpkc:hover .zg_jpkcx {
        display: block;
    }

    .zgn_yqlj span {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        margin-right: 20px;
        cursor: pointer;
    }

    .zgn_yqlj span.on {
        color: red;
    }

    .zg_uxEwm {
        position: absolute;
        width: 150px;
        padding: 10px;
        background: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, .3);
        top: 40px;
        left: -40px;
        display: none;
    }

    .zg_uxEwm dt {
        float: left;
        width: 80px;
    }

    .zg_uxEwm dd {
        text-align: center;
        font-family: 'Microsoft Yahei';
        font-size: 14px;
        color: #666;
        padding-top: 15px;
    }

    .appXZ:hover .zg_uxEwm {
        display: block;
    }

</style>
